<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

	<head>
		<title>JAVAscript练习</title>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<link rel="shortcut icon" href="http://pengjianquan.pro.bluej.cn/resume/favicon.ico" />
		<link rel="stylesheet" type="text/css" href="../../index.css"/>
	</head>

	<BODY>
		<pre><h1>JAVAscript练习</a></h1></pre>
		<div id="div1" class="box box-re">
			1、Json简单用法 Json与数组对比<br><br> 例1、用Json定义变量并提取。
			<br>
			<code>var json={oDiv1a: 5,oDiv1b: 12,oDiv1c: '15'};</code> 通过json.变量名获取<br>
			<button class="btn btn-info">Json变量a</button> <button class="btn btn-info">Json变量b</button> <button class="btn btn-info">Json变量c</button><br><br> 例2、用数组定义并提取。
			<br>
			<code>var arr=[5,12,15];</code> 通过arr[数字]获取。<br>
			<button class="btn btn-info">数组0</button> <button class="btn btn-info">数组1</button> <button class="btn btn-info">数组2</button><br><br> 2、Json与数组的循环对比
			<br><br> 例1、数组的循环
			<br>
			<button class="btn btn-info">数组循环</button> 基于for length <button class="btn btn-info">数组循环</button> 基于for in<br><br> 例2、Json的循环
			<br>
			<button class="btn btn-info">Json循环</button> 基于for in<br><br>
			<span class="text-danger">Json与数组的区别：1、Json的下标是个字符串，数组的下标是个数字。2、数组有length，Json没有length。</span>
		</div>

		<div id="Record" class="box box-re red">
			记录<br>
			<p><b>Json：</b>用于存数据</p>
			<p><b>循环：</b>数组依然用for 0~length的方法，json用for in的方法。</p>
		</div>
		<script>
			// 例1、用Json定义变量并提取。
			var div_1 = document.getElementById('div1');
			var btns = document.getElementsByTagName('button');
			(function(){		
				var json = {oDiv1a: 5,oDiv1b: 12,oDiv1c: '15'};	
				btns[0].addEventListener('click', function () {
					alert(json.oDiv1a);
				});
				btns[1].addEventListener('click', function (){
					alert(json.oDiv1b);
				});
				btns[2].addEventListener('click', function (){
					alert(json.oDiv1c);
				});
			})();


			// 例2、用数组定义并提取。

			(function () {
				var arr=[5,12,15];
				btns[3].addEventListener('click', function (){
					alert(arr[0]);
				});

				btns[4].addEventListener('click', function (){
					alert(arr[1]);
				});

				btns[5].addEventListener('click', function (){
					alert(arr[2]);
				});
			})();

			// Json与数组的循环对比

			(function (){
				var json = {oDiv1a: 5,oDiv1b: 12,oDiv1c: '15'};	
				var arr=[5,12,15];
				btns[6].addEventListener('click', function (){
					for ( var i = 0; i < arr.length; i++ ) {
							alert(i);
							alert(typeof i);
					}
				});

				btns[7].addEventListener('click', function (){
					for ( var i in arr ) {
							alert(i);
							alert(typeof i);
					}
				});

				btns[8].addEventListener('click', function (){
					for ( var i in json ) {
							alert(i);
					}
				});

			})();
		</script>
	</BODY>

</HTML>